<template>
	<div id="Home">
		<div id="titleInfo">
			<div class="profileBox">
				<span class="imgBox_photo">
					<img src="../../static/image/hd.png" alt="">
					<span class="name">陈晓涵</span>
				</span>
			</div>
			<ul class="classifySelectBox">
			    <li>
			     <view class="login">
			      <w-select v-model='gradValue' defaultValue="年级" :list='GradList' valueName='gradeName' keyName="gradeName"
			       @change='gradChange'>
			      </w-select>
			     </view>
			    </li>
			    <li>
			     <view class="login">
			      <w-select v-model='classValue' defaultValue="班级" :list='classList' valueName='className' keyName="className"
			       @change='classChange'>
			      </w-select>
			     </view>
			    </li>
			   </ul>
		</div>
		<div id="information">
			<div class="bannerBox">
							<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
								:duration="duration">
								<swiper-item>
										<img src="../../static/image/banner.png" alt="" style="width: 100%;height: 100%;">
								</swiper-item>
								<swiper-item>
										<img src="../../static/image/banner.png" alt="" style="width: 100%;height: 100%;">
								</swiper-item>
								<swiper-item>
										<img src="../../static/image/banner.png" alt="" style="width: 100%;height: 100%;">
								</swiper-item>
								<swiper-item>
										<img src="../../static/image/banner.png" alt="" style="width: 100%;height: 100%;">
								</swiper-item>
							</swiper>
			</div>
			<div class="bulletin">
				<img src="../../static/image/公告喇叭.png" alt="">
				<span><uni-notice-bar id="uni-noticebar"  scrollable background-color="#FFFFFF" speed=50 single text="他说 陛下我叫达拉崩吧斑得贝迪卜多比鲁翁再说一次达拉崩吧斑得贝迪卜多比鲁翁是不是达拉崩吧斑得贝迪卜多比鲁翁”“啊对对达拉崩吧斑得贝迪卜多比鲁翁"></uni-notice-bar></span>
			</div>
		</div>
		<div id="vajra">
			<ul>
				<li @tap="goStudentsList" ><img src="../../static/image/1日常评.png" alt=""></li>
				<li @tap="goallList"><img src="../../static/image/1查消息.png" alt=""></li>
				<li @tap="goProgressList"><img src="../../static/image/1看生长.png" alt=""></li>
				<li @tap="godata"><img src="../../static/image/1更多.png" alt=""></li>
			</ul>
		</div>
		<div id="logo"><img src="../../static/image/分组 2.png" alt=""></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				classValue:"",
				classList:"",
				GradList:"",
				gradValue:"",
				 background: ['color1', 'color2', 'color3'],
				            indicatorDots: true,
				            autoplay: true,
				            interval: 2000,
				            duration: 500,
				chooseValue: "",
				list: [{
					id: 1,
					content: '张三'
				}, {
					id: 2,
					content: '李四'
				}, {
					id: 3,
					content: '王五'
				}],
			};
		},
		created() {
			this.getGradeList()
		},
		methods: {
			getGradeList(){
				uni.request({
				    url: 'http://api.tongxintongyu.com:5001/api/Bussiness/GetGradeList', 
				    success: (res) => {
						this.GradList=res.data
				    }
				});
			},
			
			changeIndicatorDots(e) {
			            this.indicatorDots = !this.indicatorDots
			        },
			        changeAutoplay(e) {
			            this.autoplay = !this.autoplay
			        },
			        intervalChange(e) {
			            this.interval = e.target.value
			        },
			        durationChange(e) {
			            this.duration = e.target.value
			        },
			gradChange(e) {
				console.log(e);
				uni.request({
				    url: 'http://api.tongxintongyu.com:5001/api/Bussiness/GetClassList', 
					data:{
						GradeId:e.id
					},
				    success: (res) => {
						console.log(res);
						this.classList=res.data
				    }
				});
			},
			classChange(e){
				console.log(e);
			},
			goStudentsList(){
				uni.navigateTo({
					url: '/pages/studentsList/index'
				});
			},
			goProgressList(){
				uni.navigateTo({
					url: '/pages/ProgressList/index'
				});
			},
			goallList(){
				uni.navigateTo({
					url: '/pages/allList/index'
				});
			},
			godata(){
				uni.navigateTo({
					url: '/pages/data/index'
				});
			}
		}
	}
</script>
<style scoped>
	#Home {
		position: absolute;
		background: #F1F4F8;
		height: 1576rpx;
	}

	#titleInfo {
		height: 446rpx;
		width: 750rpx;
		background: url("../../static/image/homeBKG.png");
		background-size: 100%;
		border-radius: 0px 0px 24rpx 24rpx;
		z-index: -1;
	}

	.profileBox {
		width: 100%;
		padding-top: 81rpx;
	}
.classifySelectBox {
		width: 70%;
		margin: auto;
		margin-top: 30rpx;
		display: flex;
		padding: 0px 32rpx 0px 32rpx;
		justify-content: space-between;
	}

	.classifySelectBox>li {
		width: 178rpx;
		background: #B3FFE0;
		border-radius: 40rpx;
		text-align: center;
	}
	.imgBox_photo {
		display: block;
		height: 192rpx;
		margin: 0 auto;
		text-align: center;
		font-size: 44rpx;
		color: white;
		font-weight: 500;
		Letter-spacing: 2px;
		margin-bottom: 24rpx;
	}

	.imgBox_photo>img {
		display: block;
		margin: 0 auto;
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		border: 6rpx solid white;
		margin-bottom: 4rpx;
	}

	.classifySelectBox {
		display: flex;
		padding: 0px 32rpx 0px 32rpx;
		justify-content: space-between;
	}

	.classifySelectBox>li {
		width: 178rpx;
		background: #B3FFE0;
		border-radius: 40rpx;
		text-align: center;
	}

	.login {
		display: block;
	}

	#information {
		position: relative;
		top: -70rpx;
		/* border: 1px red solid; */
	}

	.bannerBox>img {
		height: 349rpx;
		/* border: 1px solid red; */
		border-radius: 20rpx;
		display: block;
		margin: auto;
		margin-bottom: 33rpx;
		width: 684rpx;
	}

	.bulletin {
		height: 48rpx;
		/* 		border: 1px solid red; */
		border-radius: 10rpx;
		padding-top: 33rpx;
		padding-bottom: 33rpx;
		background-color: white;
		margin-bottom: 33rpx;
	}

	.bulletin>img {
		width: 48rpx;
		height: 48rpx;
		margin-left: 48rpx;
		padding-right: 17rpx;
		border-right: 1px solid #ededed;
		margin-right: 16rpx;
		vertical-align: top;
	}
	.bulletin>span{
		display: inline-block;
		width: 574rpx;
		overflow: hidden;
	}
	#vajra{
		position: relative;
		top: -70rpx;
		margin-bottom: 144rpx;
	}
	#vajra>ul{
		width: 686rpx;
		height: 393rpx;
		margin: auto;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		align-content:space-around;
		align-items:center;
	}
	#vajra>ul>li{
		width: 326rpx;
		height: 180rpx;
		/* border: 1px solid red; */
	}
	#vajra>ul>li>img{
		width: 100%;
		height: 100%;
	}
	#logo{
		height: 46rpx;
		width: 100%;
		text-align: center;
		background-color: #FFFFFF00;
	}
	#logo>img{
		height: 100%;
		width: 454rpx;
	}
	.uni-margin-wrap {
			
		
		}
		.swiper {
			height: 350rpx;
			border-radius: 20rpx;
			width: 690rpx;
			margin: auto;
		}
		.swiper-item {
			display: block;
			height: 100%;
			line-height: 100%;
			text-align: center;
		}
		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}
		.uni-common-mt {
			margin-top: 60rpx;
			position: relative;
		}
		.info {
			position: absolute;
			right: 20rpx;
		}
		.uni-padding-wrap {
			width: 550rpx;
			padding: 0 100rpx;
		}
</style>